<template>
  <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="{ span: 2 }"
    autoComplete="off"
    class="jiaoyujingli"
  >
    <a-form-item label="学校名称" name="schoolName">
      <a-input
        style="width: 500px"
        size="large"
        v-model:value="formState.schoolName"
        placeholder="请输入学校名称"
      />
    </a-form-item>
    <a-form-item label="学历" name="degreeCode">
      <a-select
        :options="DEGREE_LIST_DICT"
        v-model:value="formState.degreeCode"
        style="width: 500px"
        size="large"
        placeholder="请选择"
      >
      </a-select>
    </a-form-item>
    <a-form-item label="专业名称" name="major">
      <a-input
        style="width: 500px"
        size="large"
        v-model:value="formState.major"
        placeholder="请输入专业名称"
      />
    </a-form-item>

    <a-form-item label="在校时间" name="onSchoolTime">
      <a-range-picker
        v-model:value="formState.onSchoolTime"
        size="large"
        style="width: 500px"
        :placeholder="['请选择时间段']"
      />
    </a-form-item>

    <a-form-item
      label="在校经历"
      name="experience"
      class="show-count no-resize wrapper-textarea"
    >
      <a-textarea
        style="height: 160px; resize: none"
        size="large"
        v-model:value="formState.experience"
        placeholder="请输入在校经历"
        :maxlength="300"
      />
      <div class="count">
        <span>{{ formState?.experience?.length }}</span
        >/300
      </div>
    </a-form-item>

    <a-col :span="24" class="btn-box">
      <a-form-item>
        <a-button size="large" @click="emit('close')">取消</a-button>
        <a-button size="large" type="primary" @click="onhandleSubmit"
          >保存</a-button
        >
      </a-form-item>
    </a-col>
  </a-form>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import ResumeService from '@/api/resume';
import _ from 'lodash';
import dayjs from 'dayjs';
import { message } from 'ant-design-vue';
import { reg_gb2312_en } from '@/utils/regs';
import { DEGREE_LIST_DICT } from '@/utils/dict';

const defaultFormState = {
  schoolName: null,
  degreeCode: null,
  major: null,
  onSchoolTime: [] as any,
  experience: '',
  id: null,
};

const props = defineProps<{ value: any }>();
const emit = defineEmits(['finish', 'close']);
const formState = reactive(defaultFormState);
const formRef = ref();

const rules = {
  schoolName: {
    required: true,
    trigger: 'change',
    validator: (rule: any, value: any) => {
      if (!value) {
        return Promise.reject('请填写学校名称');
      } else {
        if (!reg_gb2312_en().test(value)) {
          return Promise.reject('请填写学校名称');
        } else {
          return Promise.resolve();
        }
      }
    },
  },
  degreeCode: {
    required: true,
    trigger: 'change',
    message: '请选择学历',
  },
  major: {
    required: true,
    trigger: 'change',
    validator: (rule: any, value: any) => {
      if (!value) {
        return Promise.reject('请填写专业名称');
      } else {
        if (!reg_gb2312_en().test(value)) {
          return Promise.reject('请填写专业名称');
        } else {
          return Promise.resolve();
        }
      }
    },
  },
  onSchoolTime: {
    required: true,
    message: '请选择时间段',
    type: 'array',
    len: 2,
  },
};

const onhandleSubmit = _.debounce((key: any) => {
  onSubmit();
}, 500);

async function onSubmit() {
  try {
    await formRef.value?.validate();
    const api = formState.id
      ? ResumeService.editSeekerEducationExperience
      : ResumeService.addSeekerEducationExperience;
    const params: any = {
      ...formState,
      startTime: formState.onSchoolTime?.[0]?.format('YYYY-MM') || '',
      endTime: formState.onSchoolTime?.[1]?.format('YYYY-MM') || '',
    };
    if (!formState.id) {
      delete params.id;
    }

    const resp = await api(params);
    if (resp.code === 200) {
      message.success(`操作成功`);
      emit('finish');
    } else {
      message.error(resp?.msg || '操作失败');
    }
  } catch (error) {
    console.log(error);
  }
}

function initFormData() {
  if (!props.value) return;
  const value = props.value;
  const times: any = [];
  if (value.startTime) {
    times.push(dayjs(`${value.startTime}-01`));
  } else {
    times.push(null);
  }
  if (value.endTime) {
    times.push(dayjs(`${value.endTime}-01`));
  } else {
    times.push(null);
  }

  formState.onSchoolTime = times;
  formState.schoolName = value?.schoolName || null;
  formState.degreeCode = value?.degreeCode || null;
  formState.major = value?.major || null;
  formState.experience = value?.experience || null;
  formState.id = value?.id || null;
}

onMounted(() => {
  initFormData();
});
</script>

<style lang="less" scoped>
.jiaoyujingli {
  background-color: #f3f3f5;
  padding-bottom: 8px;
  margin-bottom: 50px;
  background-color: #f3f3f5;
  padding-top: 24px;
  margin-bottom: 50px;
  padding: 24px 20px 1px 20px;
  .btn-box {
    padding-top: 8px;
  }
}
</style>
